<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/l-comment.css" />
	</head>

	<body style="background-color: whitesmoke;">
		<!--
        	作者：1059580412@qq.com
        	时间：2018-05-24
        	描述：写评论块
        -->
		<header class="mui-bar mui-bar-nav" style="background-color: #242424;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #EEEEEE;"></a>
			<h1 class="mui-title" style="color: #EEEEEE; font-size: larger;font-weight: 700;">评论（）</h1>
		</header>
		<div class="write-comment">
			<div class="c-input mui-input-row">
				<input type="text" id="writeCMT" maxlength="255" class="mui-input-clear" placeholder="写评论">
			</div>
			<div class="c-icon" id="submit">
				<span id="writeIcon" class="mui-icon mui-icon-compose" style="font-size: 40px;"></span>
				<br/><span id="commentNumber" class="c-text">0/255</span>
			</div>
		</div>
		<!--
        	作者：1059580412@qq.com
        	时间：2018-05-24
        	描述：排序块
        -->
		<!--<div class="order" style="width:100%;background-color: ghostwhite;box-shadow: 0px 0.5px 3px #888888;">
			<div class="order-m" index=1 style="display:inline-block;padding: 1% 0 0 4%;">
				<span class="mui-icon mui-icon-checkmarkempty"></span>
				<span>升序</span>
			</div>
			<div class="order-m" style="color:limegreen;display: inline-block;" index=2>
				<span class="mui-icon mui-icon-checkmarkempty"></span>
				<span>升序</span>
			</div>
		</div>-->
		<!--
        	作者：1059580412@qq.com
        	时间：2018-05-24
        	描述：展示用户评论
        -->
        <div class="comment" id="comment">
        	<!--
            	作者：1059580412@qq.com
            	时间：2018-05-24
            	描述：具体每个用户的评论
            -->
            
            
            .
        </div>
      
		<script src="js/url.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script>
			/*
			 如果你要用jQuery必须将下面这行代码放在第一行，然后将$符号换成jQuery
			 * */
			$.noConflict();
			
			
			var chapterid;
			var chapterName;
			var comicsName;
			mui.plusReady(function() {
				chapterid = plus.webview.currentWebview().chapterid;
				chapterName = plus.webview.currentWebview().chapterName;
			    comicsName=plus.webview.currentWebview().comicsName;
			
			
			/*<div class="commentBody mui-content" style="background-color: white;">
            	<div class="c-title mui-content-padded" style="padding-top: 2%;">
            		<span class="c-name">用户昵称</span>
            		<span class="c-date">评论时间2018年</span>
            	</div>
            	<div class="c-title mui-content-padded">
            		<h4 class="commentContent">这是评论内容</h4>
            	</div>
            </div>*/
			
			jQuery.ajax({
				
				url: serverip.ip+'/comment/select',
				dataType: 'json',
				xhrFields: {
					withCredentials: true
				},
				data: {
					"chapterid": chapterid
				},
				success: function(data) {
					var div = document.getElementById('comment');
					div.innerHTML=null;
					for(var i = 0; i < data.length; i++) {
						var context = document.createElement('div');
						context.classList.add('commentBody');
						context.classList.add('mui-content');
						context.style.backgroundColor='white';
						context.innerHTML = '<div class="c-title mui-content-padded" style="padding-top: 2%;">'+
            		'<span class="c-name">用户昵称</span>'+
            		'<span class="c-date">'+data[i].commentTime+'</span>'+
            	'</div>'+
            	'<div class="c-title mui-content-padded">'+
            		'<h4 class="commentContent">'+data[i].commentContent+'</h4>'+
            	'</div>';
						div.appendChild(context);
					}
				}
			});
			
			
			});
			
			document.getElementById('submit').addEventListener('tap',function(){
				var context=document.getElementById('writeCMT').value;
				jQuery.ajax({
					url:serverip.ip+'/comment/add',
					dataType:'json',
					xhrFields: {
					withCredentials: true
				},
				data: {
					"cid": chapterid,
					"commentContent":context,
					"comicsName":comicsName,
					"chapterName":chapterName
					
				},
				success:function(){
					location.reload();
				}
				
				
				})
			});

			
			
		</script>
			
		
		<script type="text/javascript">
			mui.init()
		</script>
		<script>

			//改变区域内容
			var val=document.getElementById("writeCMT");
			val.addEventListener("input",changeText);
			function changeText(){
				var vals=document.getElementById("writeCMT").value;
				var Icon=document.getElementById("writeIcon");
				document.getElementById("commentNumber").textContent=vals.length+"/255";
				Icon.style.fontWeight="800";
			}
			
		</script>
	</body>

</html>